<!--
 * @Description: 实时数据看板
 * @Author: huacong
 * @Date: 2020-09-27 15:05:23
 * @LastEditTime: 2020-10-26 17:04:13
 * @LastEditors: huacong
-->
<template lang="pug">
  screen-wrapper(title="认证数据看板")
    el-row.content(:gutter="12")
      //- 人数统计
      el-col.partBox
        el-row.summarys(:gutter="32")
          el-col(v-for="(item, key) in summarys" :key="key" :span="6")
            .summaryBox
              .icon(:style="{backgroundPosition:`${item.backgroundPosition}`}")
              section.info
                h3 {{item.title}}
                p
                  span {{item.num | numFilter}}
                  small 人
      //- 数据分析
      el-col.partBox.dataAnaly.mt12(style="flex: 2")
        el-row(:gutter="12")
          el-col(:span="6")
            #dataCharts
          el-col.dataBox(:span="18")
            el-row(:gutter="12")
              el-col(:span="6" v-for="(item, key) in AnalyData" :key="key")
                h3
                span {{item.title}}
                .dataitem
                  .icon(style="background-position: center -2px")
                  .info
                    h4 1000
                    p 住院数据
                .dataitem
                  .icon(style="background-position: center -36px")
                  .info
                    h4 1000
                    p 治疗数据
                .dataitem
                  .icon(style="background-position: center -66px")
                  .info
                    h4 1000
                    p 门诊数据
                .dataitem
                  .icon(style="background-position: center bottom")
                  .info
                    h4 1000
                    p 购药数据
      //- 实时认证数据
      el-col.partBox.mt12(style="flex: 3")
        el-row.h(:gutter="20")
          el-col.recogData.h.flexBox(:span="18")
            h2 实时认证数据
            el-scrollbar(
              style="flex: 1"
              :native='false'
              class="scrollWrapper"
              wrap-class="scroll__wrap"
              view-class="scroll__view"
              :noresize='false'
              )
              el-row(:gutter="12" v-if="recogData.length > 0")
                el-col(:md="6" :xl="8" v-for="item in recogData" :key="item.id")
                  el-card.recogBox(:body-style="{ padding: '5px 20px' }")
                    .imgBox
                      a-image(:url="item.url" height="132px" width="100%")
                    .info.tc
                      p 姓名：{{item.name}}0
                      p
                        span(:class="item.status === 1 ? 'c_blue' : 'c_error'") {{item.statusName}}
                      p {{item.createTime}}
                      p {{item.departName}}
              empty(v-else style="opacity:0.16")
          el-col.h.flexBox(:span="6")
            h2 预警数据
            .warnData
              .warnDataWapper
                .warnDataBox(v-for="(item, key) in warnData" :key="key")
                  h3 {{item.name}}
                  .dataBox
                    p
                      span(style="background: #4bdebd" :style="{width: warnBarFn(item.busiNum, warnData)}")
                      small {{item.busiNum}}
                    p
                      span(style="background: #1da5eb" :style="{width: warnBarFn(item.warnNum, warnData)}")
                      small {{item.warnNum}}
              footer
                span 业务量
                span 预警数
</template>
<script>
import _ from 'lodash'
import { AImage, Empty } from '@/components'
import { echartsMixin } from '@/core/mixins'
import ScreenWrapper from '../ScreenWrapper'

export default {
  name: 'RealtimeDataBoard',
  components: {
    ScreenWrapper,
    AImage,
    Empty
  },
  mixins: [echartsMixin],
  data () {
    return {
      summarys: {
        healthCare: {
          title: '医保总人数',
          num: 125,
          backgroundPosition: 'center top'
        },
        biofeature: {
          title: '生物特征采集总人数',
          num: 125,
          backgroundPosition: 'center -48px'
        },
        recog: {
          title: '认证总次数',
          num: 125,
          backgroundPosition: 'center -96px'
        },
        recogTotal: {
          title: '总认证率',
          num: 12532,
          backgroundPosition: 'center bottom'
        }
      },
      AnalyData: {
        hospital: {
          title: '住院数据',
          data: {}
        },
        cure: {
          title: '治疗数据',
          data: {}
        },
        outPatient: {
          title: '门诊数据',
          data: {}
        },
        mente: {
          title: '门特数据',
          data: {}
        }
      },
      recogData: [],
      warnData: {},
      echartsId: 'dataCharts'
    }
  },
  mounted () {
    this.recogChartsDraw()
  },
  methods: {
    // 认证图表绘制
    recogChartsDraw () {
      const chartOption = {
        title: {
          left: 'center',
          top: 'center',
          text: '1222',
          subtext: '总数',
          textStyle: {
            color: '#fff'

          },
          subtextStyle: {
            color: '#fff'
          }
        },
        color: ['#04c8fb', '#f2b956', '#235ede'],
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['认证成功', '认证失败', '未认证'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '认证数据',
            type: 'pie',
            // hoverAnimation: false,
            radius: ['36%', '54%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: '#fff',
              formatter: '{c|{c}\n}',
              position: 'outside',
              rich: {
                c: {
                  fontSize: 16,
                  padding: [5, -36],
                  verticalAlign: 'bottom'
                }
              }
            },
            labelLine: {
              show: true,
              length2: 56,
              lineStyle: {
                width: 2
              }
            },
            data: [
              { value: 335, name: '认证成功' },
              { value: 310, name: '认证失败' },
              { value: 234, name: '未认证' }
            ]
          }
        ]
      }
      this.$_chartMixin_init(chartOption)
    },
    // 预警数据条宽度计算
    warnBarFn (val, list) {
      const busiNums = list.map(x => { return x.busiNum })
      const warnNums = list.map(x => { return x.warnNum })
      const max = _.max([...busiNums, ...warnNums])
      return (val / max) * 100 + '%'
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.summarys{
  position: relative;
  padding: 20px 48px;

  .summaryBox{
    padding-left: 64px;
    position: relative;

    .icon{
      position: absolute;
      width: 48px;
      height: 48px;
      left: 0;
      background-image: url('~@/assets/dp_icon1.png');
      background-repeat: no-repeat;
      display: block;
    }

    .info{
      h3 {
        color: #16b0ff;
        font-size: 16px;
        line-height: 1;
        margin-bottom: 10px;
      }

      p {
        line-height: 1;

        span {
          color: #f3db5c;
          font-size: 30px;
          font-weight: lighter;
        }

        small {
          margin-left: 5px;
          color: #16b0ff;
          font-size: 14px;
        }
      }
    }
  }

}

.dataAnaly{

  #dataCharts {
    width: 100%;
    height: 100%;
  }
  .dataBox{
    background: rgba(15,56,137,0.4);
    color: #fff;
    padding: 5px 0;

    .dataitem {
      margin: 30px 0 0 20%;
      position: relative;
      padding-left: 48px;

      .icon{
        position: absolute;
        left: 0;
        top: 0;
        background: #336bbe;
        width: 33px;
        height: 33px;
        background-image: url('~@/assets/dp_icon2.png');
        background-repeat: no-repeat;
      }

      .info{
        * {
          color: #fff;
          font-size: 13px;
        }

        h4{
          line-height: 1;
          margin-bottom: 3px;
        }

        p {
          font-weight: lighter;
        }
      }
    }

    h3 {
      text-align: center;
      position: relative;

      span {
        color: #fff;
        position: relative;

        &::before, &::after {
          content: '';
          display: block;
          position: absolute;
          background: url('~@/assets/dp_t.png') center center no-repeat;
          background-size: 100% 60%;
          top: 0;
          bottom: 0;
        }

        &::before{
          right: 120%;
          left: -48px;
        }

        &::after{
          left: 120%;
          right: -48px;
          transform: scale(-1, 1);
        }
      }

    }
  }
}

.recogBox {
  background: rgba(51,107,190, 0.4);
  position: relative;
  margin-bottom: 12px;

  .imgBox {
    width: 120px;
    padding:6px;
    background: #1a3f82;
  }

  .info {
    margin-top: 5px;
    font-size: 12px;
    color: #fff;
    position: relative;

    p {
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 0;
    }
  }
}

.flexBox {
  display: flex;
  flex-direction: column;
}

.warnData{
  display: flex;
  flex-direction: column;
  flex: 1;

  .warnDataWapper{
    flex: 1;
    padding: 0 10%;

    .warnDataBox{
      margin-top: 36px;
      display: flex;
      align-items: center;

      > h3{
        width: 16%;
        margin-right: 20px;
      }

      .dataBox {
        flex: 1;

        p {
          margin-bottom: 2px;
          line-height: 14px;

          > span {
            display: inline-block;
            height: 14px;
            border-top-right-radius: 7px;
            min-width: 10px;
            max-width: 80%
          }

          > small {
            color: #fff;
            font-size: 12px;
            font-weight: lighter;
            margin-left: 10px
          }
        }
      }
    }
  }

  footer{
    margin-top: 36px;
    color: #fff;

    span{
      display: inline-block;
      margin-right: 20px;
      position: relative;
      padding-left: 30px;

      &:first-child{
        &::before{
          background: #4bdebd;
        }
      }

      &::before{
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 0;
        width: 24px;
        border-radius: 2px;
        background: #4ccbef;
      }
    }
  }
}
</style>
